<template>
  <div class="grade-change-rules-main">
    <el-card shadow="never">
      <div class="title">
        <div class="title-label">
          <div class="title-label-name">等级变更</div>
          <el-switch v-model="formInfo.switch" @change="changeSwitch" :active-value="1" :inactive-value="2" />
        </div>
        <div class="title-label-text">开启后，系统将根据以下设置的等级变更方式变更会员等级。</div>
      </div>
      <div class="content">
        <div>请选择等级变更规则：</div>
        <div class="radio-item">
          <el-radio v-model="formInfo.radio" label="1">根据等级规则自动升降级</el-radio>
        </div>
        <div class="radio-item-desc">根据等级管理设置的升级条件自动升降级。</div>
        <div class="radio-item">
          <el-radio v-model="formInfo.radio" label="2">同步第三方会员等级</el-radio>
        </div>
        <div class="radio-item-desc">
          选择此项需设置所同步会员等级的第三方同步链接。设置后，会员将跟随第三方应用变更等级，不再根据等级管理中设置的升级条件进行升降级。
        </div>
        <el-form class="form-con" v-if="formInfo.radio == '2'" ref="form" :model="formInfo" label-width="80px">
          <el-form-item label="同步平台">
            <el-select 
              v-model="formInfo.name"
              placeholder="请选择同步平台" 
              size="small">
              <el-option
                v-for="el in typeList"
                :key="el.code"
                :label="el.name"
                :value="el.code"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <div class="button-wrap">
          <el-button type="primary" @click="onSubmit()">保存</el-button>
        </div>
      </div>
    </el-card>
    <Dialog :appDialog="appDialog">
      <div>开启等级变更后，所有会员将按照所设置的等级变更规则变更会员等级。</div>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Dialog from '@/components/Dialog.vue'

const typeList = reactive<any>([
  { name: '客易达电商', code: 1 },
  { name: '有赞商城', code: 2 },
  { name: '其他', code: 3 }
])

const formInfo = reactive<any>({
  radio: '1',
  name: '',
  switch: 2
})

const cancelHandel = () => {
  appDialog.visible = false
}

const submitHandel = () => {

}

const appDialog = reactive<any>({
  visible: false,
  title: '确定要开启等级变更吗？',
  width: '30%',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确定'
})

const changeSwitch = (val: any) => {
  console.log(val,'1')
  appDialog.visible = true
}

const onSubmit = () => {

}

</script>
<style lang="scss" scoped>
.grade-change-rules-main {
  .title {
    .title-label {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &::before {
        display: inline-block;
        width: 4px;
        height: 16px;
        content: '';
        background: #ff6b00;
      }
      .title-label-name {
        padding: 0 12px;
        color: #33302D;
      }
    }
    .title-label-text {
      padding-left: 24px;
      color: #969696;
      font-size: 14px;
      line-height: 14px;
    }
  }
  .content {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #EAEAEA;
    .radio-item-desc {
      padding-left: 24px;
      color: #969696;
      font-size: 14px;
      line-height: 14px;
    }
    .form-con {
      margin-top: 24px;
    }
    .button-wrap {
      margin-top: 72px;
    }
  }
  
}
</style>